<script setup>
import {computed} from "vue";
import {useRoute} from "vue-router";
const list = [
  {
    path:"/index",
    name:"index",
    label:"首页",
    icon: "HomeFilled",
  },
  {
    path:"/user/list",
    name:"user",
    label:"用户管理",
    icon: "Promotion",
  },
  {
    path:"/group/list",
    name:"group",
    label:"招宣组",
    icon: "Avatar",
  },
  {
    path:"/userInfo",
    icon: "UserFilled",
    label: "个人中心",
    children:[
      {
        path:"/user/info",
        name:"userinfo",
        label:"基本资料",
        icon: "user",
      },
      {
        path:"/user/resetPassword",
        name:"resetPassword",
        label:"重置密码",
        icon: "EditPen",
      }
    ]
  },
  {
    path:"/house/list",
    name:"house",
    label:"房源管理",
    icon: "House",
  },
];
const noChildren = ()=>{
  return list.filter(item=>!item.children)
}
const hasChildren = ()=>{
  return list.filter(item => item.children)
}
const route = useRoute();
const activeMenu = computed(() => {
  const { meta, path } = route;
  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
})
</script>

<template>
  <el-aside width="200px">
    <div class="el-aside__logo"></div>
    <el-menu active-text-color="#ffd04b" background-color="#232323" text-color="#fff"
             router :default-active="activeMenu">
      <el-menu-item  :index="item.path" v-for="item in noChildren()" :key="item.path">
        <component class="icons" :is="item.icon"></component>
        <span>{{item.label}}</span>
      </el-menu-item>
      <el-sub-menu :index="item.path" v-for="item in hasChildren()" :key="item.path">
        <template #title>
          <component class="icons" :is="item.icon"></component>
          <span>{{item.label}}</span>
        </template>
        <el-menu-item :index="subItem.path" v-for="(subItem,subIndex) in item.children" :key="subIndex">
          <component class="icons" :is="subItem.icon"></component>
          <span>{{subItem.label}}</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<style scoped lang="scss">
.el-aside {
  background-color: #232323;

  &__logo {
    height: 120px;
    background: url('@/assets/login_title.png') no-repeat center / 120px auto;
  }

  .el-menu {
    border-right: none;
  }
  .icons{
    margin-right: 8px;
    width: 18px;
    height: 18px;
  }
}
</style>
